<template>
  <el-form ref="ruleFormRef" class="auth-form" :model="form" :rules="rules" @submit.prevent="handleSubmit(ruleFormRef)">
    <!-- 身份选择 start-->
    <el-form-item prop="role">
      <el-radio-group v-model="form.role" size="large" class="role-radio-group">
        <el-radio-button :label="1">学生</el-radio-button>
        <el-radio-button :label="2">教师</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <!-- 身份选择 end -->
    <transition-group name="list" tag="div">
      <el-form-item key="username" prop="username">
        <el-input v-model="form.username" placeholder="用户名" prefix-icon="User" size="large" />
      </el-form-item>

      <el-form-item key="realName" prop="realName">
        <el-input v-model="form.realName" placeholder="真实姓名" prefix-icon="Message" size="large" />
      </el-form-item>

      <el-form-item key="password" prop="password">
        <el-input v-model="form.password" type="password" placeholder="密码" prefix-icon="Lock" show-password
          size="large" />
      </el-form-item>

      <el-form-item key="checkedPassword" prop="checkedPassword">
        <el-input v-model="form.checkedPassword" type="password" placeholder="确认密码" prefix-icon="Lock" show-password
          size="large" />
      </el-form-item>

      <!-- 验证码输入部分 -->
      <el-form-item prop="captcha">
        <el-row :gutter="16" class="captcha-row">
          <el-col :span="16">
            <el-input v-model="form.captcha" placeholder="请输入验证码" prefix-icon="Key" size="large" clearable>
            </el-input>
          </el-col>
          <el-col :span="8">
            <img ref="captchaImg" :src="'api/auths/captcha'" style="margin-left: 20px; height: 47px;cursor: pointer;"
              alt="" @click="getVerify" />
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item key="submit">
        <el-button type="primary" size="large" native-type="submit" class="submit-btn" :loading="submitBtnStatus">
          注册
        </el-button>
      </el-form-item>
    </transition-group>
  </el-form>
</template>
  
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Encrypt } from '@/utils/secret';
import { registerApi, verifyCode } from '@/api/auth'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

// 表单实例
const ruleFormRef = ref<FormInstance>()
// 表单数据对象
const form = reactive({
  username: '',
  realName: '',
  password: '',
  checkedPassword: '',
  captcha: '',
  role: 1
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择身份', trigger: 'change' }
  ],
  checkedPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }, trigger: 'blur'
    }
  ]
}

// 按钮状态
const submitBtnStatus = ref(false)

// 获取验证码逻辑
const captchaImg = ref<HTMLImageElement>()
const getVerify = () => {
  captchaImg.value!.src = 'api/auths/captcha?t=' + Date.now()
}

const handleSubmit = async (formEl: FormInstance | undefined) => {
  try {
    if (!formEl) return
    await formEl.validate(async (valid: boolean) => {
      if (valid) {
        // 校验验证码
        const captchaResult = await verifyCode(form.captcha)
        if (captchaResult.code != 1) {
          ElMessage.error(captchaResult.msg)
          return
        }
        submitBtnStatus.value = true
        // 待提交数据
        const registerData = {
          userName: form.username,
          realName: form.realName,
          password: Encrypt(form.password),
          checkedPassword: Encrypt(form.checkedPassword),
          roleId: form.role
        }
        const { code, msg } = await registerApi(registerData)
        if (code === 1) {
          ElMessage.success(msg)
        } else {
          ElMessage.error(msg)
        }
      } else {
        ElMessage.error('请填写正确的表单信息')
        return
      }

    })

  } catch (error) {
    console.log(error)
  }finally {
    submitBtnStatus.value = false
  }
}
</script>
  
<style lang="scss" scoped>
.auth-form {

  // 角色选择 start
  .role-radio-group {
    width: 100%;
    margin-bottom: 20px;

    :deep(.el-radio-button) {
      flex: 1;
      text-align: center;

      // 按钮样式
      .el-radio-button__inner {
        width: 100%;
        transition: all 0.3s ease;
        border-radius: 8px;
        border: 1px solid #ebeef5;
        background: #f5f7fa;
      }

      // 选中状态
      &.is-active {
        .el-radio-button__inner {
          background: var(--el-color-primary-light-9);
          border-color: var(--el-color-primary-light-5);
          color: var(--el-color-primary);
          box-shadow: none;
        }
      }

      // 悬停状态
      &:hover:not(.is-active) {
        .el-radio-button__inner {
          border-color: var(--el-color-primary-light-5);
        }
      }
    }
  }

  // 角色选择 end
  .el-form-item {
    margin-bottom: 25px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .submit-btn {
    width: 100%;
    font-size: 16px;
    letter-spacing: 2px;
    height: 48px;
  }
}

.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
  position: absolute;
}

.list-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.list-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.list-move {
  transition: transform 0.3s ease;
}
</style>